<template>
	<view>
		<view>
			<uni-row>
				<uni-col :span="2" class="col-left">
					<view class="vt1">				 
					    <view class="graphics1"></view> 
						
					    <view class="graphics2"></view>
					</view>
				</uni-col> 
			    <uni-col :span="22" class="col-right">
					<view class="vt2">
					    <text class="tt1">2012届毕业生母校游</text>
					</view>	       
			    </uni-col> 	        
			</uni-row>
		</view>
		<uni-card class="ct1">
			<view class="vt3">
				<view class="graphics3"></view>
				<view class="a"></view>
				<text class="tt2">审批状态</text>					       				
			</view>
			<view class="vt4">
				<text class="tt3">申请中；等待意见</text>
			</view>
		</uni-card>
		<uni-card class="ct2">
			<view class="vt3">
				<view class="graphics3"></view>
				<view class="a"></view>
				<text class="tt2">活动来源</text>
					       
				
			</view>
			<view class="vt4">
				<text class="tt4">派发</text>
			</view>
		</uni-card>
		<uni-card class="ct3">
				<view class="vt3">
					<view class="graphics3"></view>
					<view class="a"></view>
					<text class="tt2">活动时间</text>
				</view>
				<view class="vt4">
					<text class="tt5">计划开始日期：2023/03/29<br>计划结束日期：2023/03/29<br>合计时长：1天</text>
				</view>			
		</uni-card>
		<uni-card class="ct2">
			<view class="vt3">
				<view class="graphics3"></view>
				<view class="a"></view>
				<text class="tt2">活动区域</text>
					       
				
			</view>
			<view class="vt4">
				<text class="tt4">派湖北省/武汉市/洪山区</text>
			</view>
		</uni-card>
		<uni-card class="ct2">
			<view class="vt3">
				<view class="graphics3"></view>
				<view class="a"></view>
				<text class="tt2">活动牵头宣传组</text>
					       
				
			</view>
			<view class="vt4">
				<text class="tt4">宣传组001</text>
			</view>
		</uni-card>
		<uni-card class="ct4">
			<view class="vt3">
				<view class="graphics3"></view>
				<view class="a"></view>
				<text class="tt2">审批流程</text>
					       
				
			</view>
			<view class="vt5">
				<uni-row>
					<uni-col :span="4" class="col-left">
						<view >
						    <!-- 假设 currentUserAvatar 是从某处（如登录后的响应或用户信息API）获取的头像URL -->  
						    <view >
						    	<image class="image1" :src="avatarUrl" /> 
						    </view>
							<view class="vt6">
								<image class="image2" :src="avatarUrl1" /> 
							</view>
						</view> 
					</uni-col> 
				    <uni-col :span="1" class="col-right">
						<view class="vt7">
							<image class="image3" src="../../../static/check-circle-fill.png"></image>
							<view class="vt8"></view>
							<image class="image4" src="../../../static/check-circle-fill(1).png"></image>
						</view>         
				    </uni-col> 	 
					<uni-col :span="19" class="col-right">
						<view class="vt9">
							<view class="vt10">
								<text class="tt6">发起人(招宣成员/全体教职工)</text>
							</view>
							<view class="vt11">
								<text class="tt7">张晓军</text>
							</view>
							<view >
								<text class="tt8">2023-02-15 11:37:08</text>
							</view>
						</view>
						<view class="vt12">
							<view class="vt10">
								<text class="tt6">审批人(活动组长)</text>
							</view>
							<view class="vt11">
								<text class="tt7">张晓军</text>
							</view>
							<view >
								<text class="tt8">2023-02-15 11:37:08</text>
							</view>
						</view> 		
					</uni-col> 	   
				</uni-row>
				
			</view>
		</uni-card>
		<button @click="confirmRevoke" class="button">撤销申请</button>  
	</view>
</template>

<script>
	export default {  
		data() {  
		    return {  
		      // 假设这是根据某些逻辑动态获取的图片URL，但在这里我们直接设置为静态路径  
		      avatarUrl: '/static/logo.png' ,
			  avatarUrl1: '/static/网络断开.png' 
		    }  
		  },
	    methods: {  
	        confirmRevoke() {  
	          if (window.confirm('您确定要撤销申请吗？')) {  
	            this.submitForm();  
	          }  
	        },  
	        submitForm() {  
	          // 这里是你的撤销逻辑，可能是发送一个AJAX请求到后端  
	          console.log('撤销申请已提交');  
	          // 示例AJAX请求  
	          // axios.post('/api/revoke', { id: this.applicationId }).then(response => {  
	          //   console.log('撤销成功', response);  
	          // }).catch(error => {  
	          //   console.error('撤销失败', error);  
	          // });  
	        }  
	      }  
	} 
</script>

<style>
.vt1{
	width: 18px;
	height: 18px;
	position: relative;
	
	margin-left: 16px;
	margin-top: 19px;
	
}
.graphics1{
	width: 11px;
	height: 14px;
	transform: rotate(-180deg);
	background: #276EFF;
	left: 3.08px;
	bottom:1.93px;
	position: absolute;

}
.graphics2{
	width: 9px;
	height: 5px;
	background: #00DCFF;
	left:7px;
	bottom:6PX;
	position: absolute;
}
.vt2{
	margin-top: 16px;
	
}
.tt1{
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 16px;
	color: #000000;
	letter-spacing: 0;
	line-height: 23px;
}
.ct1{
	
	height: 74px;
	background: #FFFFFF;
	border-radius: 8px;
	margin-top: 12px;
	margin-left: 16px;
	margin-right: 16px;
}
.vt3{

	height: 20px;
	display: flex; /* 使用Flexbox布局 */  
	align-items: center; 
}
.graphics3{
	
	width: 4px;
	height: 4px;
	background: #C5C5C5;
	border-radius: 50%; 
	
}
.tt2{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 12px;
	color: #5D5C5C;
	letter-spacing: 0;
	line-height: 20px;
}
.tt3{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 15px;
	color: #276EFF;
	letter-spacing: 0;
	line-height: 20px;
}
.a{
	width: 4px;
}
.vt4{
	margin-top: 6px;
	margin-left:8px;
}
.ct2{
	height: 74px;
	background: #FFFFFF;
	border-radius: 8px;
}
.tt4{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 15px;
	color: #000000;
	letter-spacing: 0;
	line-height: 20px;
}
.ct3{
	
	height: 134px;
	background: #FFFFFF;
	border-radius: 8px;
}
.tt5{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 15px;
	color: #000000;
	letter-spacing: 0;
	line-height: 28px;
}
.ct4{
	height: 296px;
	background: #FFFFFF;
	border-radius: 8px;
}
.vt5{
	margin-top: 15px;
}
.image1{
	width: 40px; /* 头像的直径 */  
	height: 40px; /* 与宽度相同，以保持正方形，然后通过border-radius变为圆形 */  
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
	object-fit: cover;
}
.button {  
    margin: 16px;
    height: 40px;
    background: #276EFF;
    border-radius: 8px; 
    border: none;   
    font-family: PingFangSC-Medium;  
    font-weight: 500;  
    font-size: 15px;  
    color: #FFFFFF;  
    letter-spacing: 0;  
    line-height: 20px;  
    text-align: center; 
    padding: 0 16px;
  
     padding-top: 10px;  
    padding-bottom: 10px; 
}
.image2{
	width: 40px; /* 头像的直径 */  
	height: 40px; /* 与宽度相同，以保持正方形，然后通过border-radius变为圆形 */  
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
	object-fit: cover;
}
.vt6{
	margin-top: 93px;
}
.image3{
	width: 16px;
	height: 16px;

}
.image4{
	width: 16px;
	height: 16px;

}
.vt7{
	margin-top:13px ;
	display: flex;  
	align-items: center;
	flex-direction: column; 
}
.vt8{
	width: 1px;
	height: 125px;
	background-color: #E6E6E6;
}
.vt9{
	margin-top: 5px;
	margin-left: 24px;
	margin-bottom: 66px;
}
.tt6{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 14px;
	color: #000000;
}
.tt7{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 14px;
	color: #595959;
}
.tt8{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 12px;
	color: #989797;
}
.vt10{
	margin-bottom: 10px;
}
.vt12{
	margin-top: 5px;
	margin-left: 24px;
}
</style>